<template>
  <div class="profile-index">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">个人中心</h1>
      <p class="page-subtitle">管理您的个人信息和系统设置</p>
    </div>

    <!-- 用户信息卡片 -->
    <div class="user-profile-card">
      <div class="profile-header">
        <div class="avatar-section">
          <div class="user-avatar">
            <img v-if="userInfo.avatar" :src="userInfo.avatar" :alt="userInfo.name" />
            <svg v-else viewBox="0 0 24 24">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
          </div>
          <button class="change-avatar-btn" @click="changeAvatar">
            <svg viewBox="0 0 24 24">
              <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
            </svg>
          </button>
        </div>
        <div class="user-info">
          <h2 class="user-name">{{ userInfo.name }}</h2>
          <p class="user-email">{{ userInfo.email }}</p>
          <div class="user-level">
            <span class="level-badge" :class="userInfo.level">{{ getLevelLabel(userInfo.level) }}</span>
            <span class="join-date">注册于 {{ formatDate(userInfo.joinDate) }}</span>
          </div>
        </div>
      </div>
      
      <div class="profile-stats">
        <div class="stat-item">
          <div class="stat-number">{{ userStats.totalDetections }}</div>
          <div class="stat-label">总检测次数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ userStats.alertsReceived }}</div>
          <div class="stat-label">接收预警</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ userStats.reportSubmitted }}</div>
          <div class="stat-label">提交报告</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ userStats.pointsEarned }}</div>
          <div class="stat-label">积分获得</div>
        </div>
      </div>
    </div>

    <!-- 快速导航 -->
    <div class="quick-navigation">
      <h2 class="section-title">快速导航</h2>
      <div class="nav-grid">
        <div class="nav-card" @click="navigateTo('personal-info')">
          <div class="nav-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
          </div>
          <h3>个人信息</h3>
          <p>管理您的基本信息</p>
          <div class="nav-arrow">
            <svg viewBox="0 0 24 24">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
            </svg>
          </div>
        </div>

        <div class="nav-card" @click="navigateTo('detection-history')">
          <div class="nav-icon">
            <svg viewBox="0 0 24 24">
              <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
            </svg>
          </div>
          <h3>检测历史</h3>
          <p>查看您的检测记录</p>
          <div class="nav-arrow">
            <svg viewBox="0 0 24 24">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
            </svg>
          </div>
        </div>

        <div class="nav-card" @click="navigateTo('security-alert')">
          <div class="nav-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11.5C14.8,12.6 13.4,14 12,14C10.6,14 9.2,12.6 9.2,11.5V10C9.2,8.6 10.6,7 12,7Z"/>
            </svg>
          </div>
          <h3>安全预警</h3>
          <p>配置预警设置</p>
          <div class="nav-arrow">
            <svg viewBox="0 0 24 24">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
            </svg>
          </div>
        </div>

        <div class="nav-card" @click="navigateTo('feedback')">
          <div class="nav-icon">
            <svg viewBox="0 0 24 24">
              <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"/>
            </svg>
          </div>
          <h3>反馈建议</h3>
          <p>提交意见反馈</p>
          <div class="nav-arrow">
            <svg viewBox="0 0 24 24">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近活动 -->
    <div class="recent-activities">
      <h2 class="section-title">最近活动</h2>
      <div class="activity-list">
        <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
          <div class="activity-icon" :class="activity.type">
            <svg viewBox="0 0 24 24">
              <path :d="getActivityIcon(activity.type)" />
            </svg>
          </div>
          <div class="activity-content">
            <div class="activity-title">{{ activity.title }}</div>
            <div class="activity-description">{{ activity.description }}</div>
            <div class="activity-time">{{ formatDate(activity.timestamp) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统通知 -->
    <div class="system-notifications">
      <h2 class="section-title">系统通知</h2>
      <div class="notification-list">
        <div v-for="notification in systemNotifications" :key="notification.id" class="notification-item" :class="{ unread: !notification.read }">
          <div class="notification-icon" :class="notification.type">
            <svg viewBox="0 0 24 24">
              <path :d="getNotificationIcon(notification.type)" />
            </svg>
          </div>
          <div class="notification-content">
            <div class="notification-title">{{ notification.title }}</div>
            <div class="notification-message">{{ notification.message }}</div>
            <div class="notification-time">{{ formatDate(notification.timestamp) }}</div>
          </div>
          <button class="mark-read-btn" v-if="!notification.read" @click="markAsRead(notification.id)">
            标记已读
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 用户信息
const userInfo = ref({
  name: '张三',
  email: 'zhangsan@example.com',
  avatar: '',
  level: 'premium',
  joinDate: '2023-06-15'
})

// 用户统计
const userStats = ref({
  totalDetections: 156,
  alertsReceived: 23,
  reportSubmitted: 8,
  pointsEarned: 1250
})

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    type: 'detection',
    title: '完成谣言检测',
    description: '检测了一条关于健康的信息，结果为可疑',
    timestamp: '2024-01-15 14:30:00'
  },
  {
    id: 2,
    type: 'alert',
    title: '收到安全预警',
    description: '系统检测到可疑的诈骗短信',
    timestamp: '2024-01-15 12:15:00'
  },
  {
    id: 3,
    type: 'report',
    title: '提交反馈报告',
    description: '提交了关于检测准确性的反馈',
    timestamp: '2024-01-15 10:20:00'
  },
  {
    id: 4,
    type: 'update',
    title: '更新个人信息',
    description: '更新了手机号码和邮箱地址',
    timestamp: '2024-01-14 16:45:00'
  }
])

// 系统通知
const systemNotifications = ref([
  {
    id: 1,
    type: 'info',
    title: '系统更新通知',
    message: '平台已更新至v2.1.0版本，新增了AI内容识别功能',
    timestamp: '2024-01-15 09:00:00',
    read: false
  },
  {
    id: 2,
    type: 'warning',
    title: '安全提醒',
    message: '您的账户在异地登录，请注意账户安全',
    timestamp: '2024-01-14 20:30:00',
    read: false
  },
  {
    id: 3,
    type: 'success',
    title: '积分奖励',
    message: '恭喜您获得50积分奖励！',
    timestamp: '2024-01-14 15:20:00',
    read: true
  }
])

// 方法
const navigateTo = (page) => {
  const routes = {
    'personal-info': '/user/profile/personal-info',
    'detection-history': '/user/profile/detection-history',
    'security-alert': '/user/profile/security-alert',
    'feedback': '/user/profile/feedback'
  }
  
  if (routes[page]) {
    router.push(routes[page])
  }
}

const changeAvatar = () => {
  // 实现头像更换逻辑
  console.log('Change avatar')
}

const getLevelLabel = (level) => {
  const labels = {
    basic: '基础用户',
    premium: '高级用户',
    vip: 'VIP用户'
  }
  return labels[level] || level
}

const formatDate = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getActivityIcon = (type) => {
  const icons = {
    detection: 'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z',
    alert: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
    report: 'M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 2 2h8c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z',
    update: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'
  }
  return icons[type] || icons.detection
}

const getNotificationIcon = (type) => {
  const icons = {
    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
    warning: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
    success: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'
  }
  return icons[type] || icons.info
}

const markAsRead = (notificationId) => {
  const notification = systemNotifications.value.find(n => n.id === notificationId)
  if (notification) {
    notification.read = true
  }
}

onMounted(() => {
  // 加载用户数据
  console.log('Profile index mounted')
})
</script>

<style scoped>
.profile-index {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1e3c72;
  margin: 0 0 10px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* 用户信息卡片 */
.user-profile-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.avatar-section {
  position: relative;
  margin-right: 30px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1e3c72, #2a5298);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar svg {
  width: 40px;
  height: 40px;
  fill: white;
}

.change-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1e3c72;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.change-avatar-btn:hover {
  background: #2a5298;
}

.change-avatar-btn svg {
  width: 14px;
  height: 14px;
  fill: white;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
}

.user-email {
  font-size: 16px;
  color: #666;
  margin: 0 0 12px 0;
}

.user-level {
  display: flex;
  align-items: center;
  gap: 15px;
}

.level-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.level-badge.basic {
  background: #17a2b8;
}

.level-badge.premium {
  background: #28a745;
}

.level-badge.vip {
  background: #ffc107;
  color: #333;
}

.join-date {
  font-size: 14px;
  color: #999;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 快速导航 */
.quick-navigation {
  margin-bottom: 30px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 0 20px 0;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.nav-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.nav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.nav-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1e3c72, #2a5298);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.nav-icon svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.nav-card h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
}

.nav-card p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.nav-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  opacity: 0.3;
  transition: opacity 0.2s;
}

.nav-card:hover .nav-arrow {
  opacity: 1;
}

.nav-arrow svg {
  width: 100%;
  height: 100%;
  fill: #666;
}

/* 最近活动 */
.recent-activities {
  margin-bottom: 30px;
}

.activity-list {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.activity-icon.detection {
  background: #e3f2fd;
}

.activity-icon.alert {
  background: #fff3e0;
}

.activity-icon.report {
  background: #f3e5f5;
}

.activity-icon.update {
  background: #e8f5e8;
}

.activity-icon svg {
  width: 20px;
  height: 20px;
  fill: #666;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.activity-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

/* 系统通知 */
.system-notifications {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  position: relative;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background: #f8f9fa;
}

.notification-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #1e3c72;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.notification-icon.info {
  background: #e3f2fd;
}

.notification-icon.warning {
  background: #fff3e0;
}

.notification-icon.success {
  background: #e8f5e8;
}

.notification-icon svg {
  width: 20px;
  height: 20px;
  fill: #666;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.notification-message {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: #999;
}

.mark-read-btn {
  padding: 6px 12px;
  border: 1px solid #1e3c72;
  border-radius: 4px;
  background: white;
  color: #1e3c72;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.mark-read-btn:hover {
  background: #1e3c72;
  color: white;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .profile-index {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .profile-index {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .profile-index {
    width: 100%;
    padding: 10px;
  }

  .profile-header {
    flex-direction: column;
    text-align: center;
  }

  .avatar-section {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-grid {
    grid-template-columns: 1fr;
  }

  .activity-item,
  .notification-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .activity-icon,
  .notification-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style> 